<!--
    This page contains the form "Facilities" (Heating & Hot Water)
    with Javascript functions
-->

<script type="text/javascript">
    function SelectReighBox(sindex,conso){

    
        document.getElementById('selectHotWaterHidden').value = document.getElementById('selectHotWater').value;
        
        var monindex = sindex;
        var conso = typeof conso !== 'undefined' ? '#Consommationeau' : '#ConsommationChauffage';
 
        $(conso+' #tboxu').val('');
 
        $('#divheat').removeClass("cacher");
        $(conso+' #monney').removeClass("cacher");
        $(conso).removeClass("cacher");
        enable_text(false);
        $(conso+' input[id=checkboxchf]').attr('checked', false);
        
        switch(monindex){
            case 0:
                $(conso).addClass("cacher");
                break;

            case 1:
                $(conso+' #unite').text("kWh");
                $(conso+' #uniteHidden').val("kWh");
                break;
            case 2:
                $(conso+' #unite').text("kWh");
                $(conso+' #uniteHidden').val("kWh");
                break;
            case 3:
                $(conso+'  #unite').text("litres");
                $(conso+' #uniteHidden').val("litres");
                break;
  
            case 4:
                $(conso+'  #unite').text("kWh");
                $(conso+' #uniteHidden').val("m3");
                break;
            case 5:
                $(conso+'  #unite').text("m3");
                $(conso+' #monney').addClass("cacher");
                $(conso+' #uniteHidden').val("m3");
                break;
            case 6:
                $(conso+'  #unite').text("m3");
                $(conso+' #monney').addClass("cacher");
                $(conso+' #uniteHidden').val("m3");
                break;
            case 7:
                $(conso+'  #unite').text("kWh");
                $(conso+' #uniteHidden').val("m3");
                break;
            case 8:
                $(conso+'  #unite').text("m3");
                $(conso+' #uniteHidden').val("m3");
                $(conso+' #monney').addClass("cacher");
                $('input[name=differentType]').attr('checked',true);
                visibleType();
                break;
            case 9:
                $(conso+'  #unite').text("m3");
                $(conso+' #uniteHidden').val("m3");
                $(conso+' #monney').addClass("cacher");
                $('input[name=differentType]').attr('checked',true);
                visibleType();
                
                break;
        }
    }
     
    function enable_text(status,conso){
        conso = typeof conso !== 'undefined' ? '#Consommationeau' : '#ConsommationChauffage';
        $(conso+' #pkwh').addClass("cacher");
         
        $(conso +' #pkwh').val('');
        $(conso +' #tboxM1').val('');
        $(conso +' #tboxu').val('');
         
        if(status){
            $(conso +" #tboxM1").removeAttr('readonly');
            $(conso +" #tboxu").attr('readonly', 'readonly');
         
            if(conso=="#ConsommationChauffage")
                tmpval=document.getElementById('selectboxHeat').value;
            else
                tmpval=document.getElementById('selectHotWater').value;
          
            if(tmpval==1||tmpval==2||tmpval==7)
                $(conso +' #pkwh').removeClass("cacher");
        }
        else{
            $(conso +" #tboxM1").attr('readonly', 'readonly');
//            $(conso +" #tboxM1").style.color="grey";
            $(conso +" #tboxM1").val('');
            $(conso +" #tboxu").removeAttr('readonly');
        }
    }
    
    //For enable a different system type for hot water
    function visibleType(){          
        $('#Consommationeau #tboxu').val('');
        $('#Consommationeau #tboxM1').val('');
        $('#Consommationeau #pkwh').val('');
        
        if(document.getElementById('differentType').checked){
            $('#selectHotWater').removeAttr("disabled");
            document.getElementById('selectHotWater').style.color = "black";
            document.getElementById('txtChecked').value="";
            $('#changedHotWater').removeAttr("disabled");
            $('#consoeau').removeClass("cacher");
        }
        else{
            $('#selectHotWater').attr("disabled", true);
            document.getElementById('selectHotWater').value = "0";
            document.getElementById('selectHotWaterHidden').value = "0";
            document.getElementById('txtChecked').style.color = "grey";
            $('#changedHotWater').attr("disabled", true);
            document.getElementById('changedHotWater').value="";
            document.getElementById('changedCheckedHotWater').style.color = "grey";
            $('#yearChangedHotWater').attr('readonly', 'readonly');
            $('#consoeau').addClass("cacher");
        }
    }
    
    //For enable the year of renovation for the heating system
    function visibleHeating(){
        if(document.getElementById('changedHeating').checked){
            document.getElementById('yearChangedHeating').removeAttribute('readonly');
            document.getElementById('changedCheckedHeating').style.color="black";
        }
        else{
            document.getElementById('yearChangedHeating').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedHeating').style.color="grey";
            document.getElementById('yearChangedHeating').value="";
        }
    }
    
    //For enable the year of renovation for the hot water system
    function visibleHotWater(){        
        if(document.getElementById('changedHotWater').checked){
            document.getElementById('yearChangedHotWater').removeAttribute('readonly');
            document.getElementById('changedCheckedHotWater').style.color="black";
        }
        else{
            document.getElementById('yearChangedHotWater').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedHotWater').style.color="grey";
            document.getElementById('yearChangedHotWater').value="";
        }
    }
</script>

<div id="content">
    <form id="facilitiesForm" method="POST">
        <div style="padding-top: 20px; padding-left: 20px"><p id="subtitle"><?php echo TXT_TAB_FACILITIES; ?></p></div>
        <div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">

            <table id="facilitiesTab">
                <tr>
                    <td id="subtitle2"><?php echo TXT_HEATING; ?></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <?php
                        echo '<select id="selectboxHeat" name="selectHeating" onchange="SelectReighBox(this.selectedIndex)" >
                        <option selected value="0" value="Veuillez choisir une option">
                           ' . TXT_PLEASE_SELECT_AN_OPTION .
                        '</option>';

                        $connection = mysql_connect('153.109.141.81:3306', 'root', '') or die('erreur');
                        $db = mysql_select_db('savenrj', $connection) or die('erreur');

                        $request2 = mysql_query('SELECT idnorm_heating_type FROM norm_heating_type');
                        $request = mysql_query('SELECT type FROM norm_heating_type');
                        $nombrelignes = mysql_numrows($request);
                        for ($i = 0; $i < $nombrelignes; $i++) {
                            $nom = mysql_result($request, $i);
                            $id = mysql_result($request2, $i);
                            echo '<option value="' . $id . '"> ' . utf8_encode($nom) . ' </option>';
                        }
                        echo '</select>';
                        ?>
                    </td>
                    <td>
                        <?php echo TXT_CHANGED_FACILITIES; ?>
                        <input type="checkbox" id="changedHeating" name="changedHeating" onclick="visibleHeating()" />
                        <span id="changedCheckedHeating"><?php echo TXT_CHANGED_YEAR; ?></span>
                        <input type="date" id="yearChangedHeating" name="yearChangedHeating" readonly />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td id="subtitle2"><?php echo TXT_HOTWATER; ?></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <?php echo TXT_DIFFERENT_FACILITIES; ?>
                        <input type="checkbox" unchecked id="differentType" name="differentType" onclick="visibleType()" />
                    </td>
                    <td></td>
                </tr>
                <tr id="checked">
                    <td>
                        <?php
                        echo '<select disabled id="selectHotWater" name="selectHotWater" onchange="SelectReighBox(this.selectedIndex,1)" >
                        <option selected value="0" value="Veuillez choisir une option">
                           ' . TXT_PLEASE_SELECT_AN_OPTION .
                        '</option>';

                        $connection = mysql_connect('153.109.141.81:3306', 'root', '') or die('erreur');
                        $db = mysql_select_db('savenrj', $connection) or die('erreur');

                        $request2 = mysql_query('SELECT idnorm_heating_type FROM norm_heating_type');
                        $request = mysql_query('SELECT type FROM norm_heating_type');
                        $nombrelignes = mysql_numrows($request);
                        for ($i = 0; $i < $nombrelignes; $i++) {
                            $nom = mysql_result($request, $i);
                            $id = mysql_result($request2, $i);
                            echo '<option value="' . $id . '"> ' . utf8_encode($nom) . ' </option>';
                        }
                        echo '</select>';
                        ?>
                        <input hidden type="number" id="selectHotWaterHidden" name="selectHotWaterHidden" />
                    </td>
                    <td>
                        <span id="txtChecked"><?php echo TXT_CHANGED_FACILITIES; ?></span>
                        <input type="checkbox" disabled id="changedHotWater" name="changedHotWater" onclick="visibleHotWater()" />
                        <span id="changedCheckedHotWater"><?php echo TXT_CHANGED_YEAR; ?></span>
                        <input type="date" id="yearChangedHotWater" name="yearChangedHotWater" readonly />
                    </td>
                </tr>
            </table>

        </div>

        <div class="cacher" id="divheat" style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
            <div style="height: 200px;padding-top:20px;">
                <div style="width : 50%; float:left;" >
                    <p id="subtitle">Consommation Chauffage</p>

                    <div id="ConsommationChauffage" class="cacher">
                        <div id="ConsommationChauffageInfo" style="float: left; margin-left: 50px; padding-top: 30px; height: 200px;">
                            <div id="mH" style="display: inline-block;" >
                                <div class="dimTxt" id="unite" >en litre</div>
                                <div class="dimCell">
                                    <input type="text" name="consommationChauffageLitre" id="tboxu" style="width: 60px;" />
                                    <input hidden id="uniteHidden" type="text" name="uniteChauffage" />
                                </div>
                            </div>
                            <div id="monney" style="display: inline-block;">
                                <div  class="dimTxt" id="chf"> en CHF</div>
                                <div class="dimCell">
                                    <input id="tboxM1" class="changeArea" readonly type="text" name="consommationChauffageCHF" style="width: 60px;" onchange="claculate();" />
                                    <input type="checkbox" id="checkboxchf" onclick="enable_text(this.checked)"/>Changer
                                </div>
                            </div>
                            <div id="pkwh" class="cacher">
                                <div class="dimTxt"> Prix du KWh </div>
                                <div class="dimCell">
                                    <input id="pkwh" style="width: 60px;" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="width : 50%;  float:left" class="cacher" id="consoeau">
                    <p id="subtitle">Consommation eau chaude</p>

                    <div id="Consommationeau" class="cacher">
                        <div id="ConsommationChauffageInfo" style="float: left; margin-left: 50px; padding-top: 30px; height: 200px;">
                            <div id="mH" style="display: inline-block;" >
                                <div class="dimTxt" id="unite" >en litre</div>
                                <div class="dimCell">
                                    <input name="consommationEauChaudeLitre" id="tboxu" style="width: 60px;" />
                                    <input hidden id="uniteHidden" type="text" name="uniteEauChaude" />
                                </div>
                            </div>
                            <div id="monney" style="display: inline-block;">
                                <div  class="dimTxt" id="chf"> en CHF</div>
                                <div class="dimCell">
                                    <input id="tboxM1" type="text" class="changeArea" readonly name="consommationEauChaudeCHF" style="width: 60px;" onchange="claculate();" />
                                    <input type="checkbox" id="checkboxchf" onclick="enable_text(this.checked,'Consommationeau')"/> Changer
                                </div>
                            </div>
                            <div id="pkwh" class="cacher">
                                <div class="dimTxt"  > Prix du KWh </div>
                                <div class="dimCell">
                                    <input id="pkwh" type="text" style="width: 60px;" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div> <!-- END div content -->
